<template>
  <view class="noData">
    <image :src="imageUrl" mode="widthFix"></image>
    <slot>
      <text class="text">暂无数据</text>
    </slot>
  </view>
</template>

<script>
export default {
  name: "NoData",
  props: {
    type: {
      type: String,
      default: 'default'
    }
  },
  watch: {
    type: {
      handler (newVal) {
        console.log(newVal)
        newVal && this.handlerImage(newVal)
      },
      immediate: true
    }
  },
  data () {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handlerImage (type) {
      switch (type) {
        case 'msg':
          this.imageUrl = '/static/no-msg.svg';
          break;
        default:
          this.imageUrl = '/static/no-data.svg';
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.noData {
  width: 100%;
  height: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image {
    display: block;
    width: 30%;
  }
  text {
    color: #999;
    padding: 10rpx 0;
  }
}
</style>